<template>
  <div class="withdraw_detail">
      <h4>提现列表>提现详情</h4>
      <div class="container" style="padding: 30px 0;">
          <div class="info infoBox" >
              <div class="info_left">
                    <h4>提现信息</h4>
                    <div class="item">
                        <div class="left">用户名： </div>
                        <div class="right">{{withdrawInfo.name}}</div>
                    </div>
                    <div class="item">
                        <div class="left">分类： </div>
                        <div class="right">{{withdrawInfo.userCategory}}</div>
                    </div>
                    <div class="item">
                        <div class="left">联系方式：</div>
                        <div class="right">{{withdrawInfo.tel}}</div>
                    </div>
                    <div class="item">
                        <div class="left">提现金额：</div>
                        <div class="right">{{withdrawInfo.money}}元</div>
                    </div>
                    <div class="item">
                        <div class="left">提现账号：</div>
                        <div class="right">{{withdrawInfo.withDrawNo}}</div>
                    </div>
                    <div class="item">
                        <div class="left">提现状态：</div>
                        <div class="right">{{withdrawInfo.status}}</div>
                    </div>
                    <div class="item">
                        <div class="left">提现方式:</div>
                        <div class="right">{{withdrawInfo.operateWay}}</div>
                    </div>
                    <!-- 提现失败原因显示 -->
                    <div class="item" v-if="withdrawInfo.statusCode == 3">
                        <div class="left">提现失败原因：</div>
                        <div class="right">{{withdrawInfo.failReason}}</div>
                    </div>
              </div>
              <div class="info_right">
                  <!-- <div v-if="withdrawInfo.statusCode==2">
                    <h4>打款信息</h4>
                    <div class="item">
                        <div class="left">打款方式： </div>
                        <div class="right">{{withdrawInfo.name}}</div>
                    </div>
                    <div class="item">
                        <div class="left">打款金额： </div>
                        <div class="right">{{withdrawInfo.userCategory}}</div>
                    </div>
                    <div class="item">
                        <div class="left">打款账号：</div>
                        <div class="right">{{withdrawInfo.tel}}</div>
                    </div>
                    <div class="item">
                        <div class="left">银行名称：</div>
                        <div class="right">{{withdrawInfo.money}}元</div>
                    </div>
                    <div class="item">
                        <div class="left">打款备注：</div>
                        <div class="right">{{withdrawInfo.withDrawNo}}</div>
                    </div>
                    <div class="item">
                        <div class="left">打款流水号：</div>
                        <div class="right">{{withdrawInfo.status}}</div>
                    </div>
                  </div> -->
              </div>
           
          </div>
          <div class="info"  style="border-bottom:1px solid #eee;">
              <h4>操作记录</h4>
              <div class="item">
                  <div class="left">申请时间： </div>
                  <div class="right">{{withdrawInfo.addTime}}</div>
              </div>
              <!-- 提现的时间 -->
              <!-- <div class="item"  v-if="withdrawInfo.statusCode==2">
                  <div class="left">提现时间： </div>
                  <div class="right">{{withdrawInfo.addTime}}</div>
              </div> -->
              <!-- 提现失败的时间 -->
              <div class="item"  v-if="withdrawInfo.statusCode==2">
                  <div class="left">提现时间： </div>
                  <div class="right">{{withdrawInfo.addTime}}</div>
              </div>
          </div>
           <div class="btn_box" style="padding:60px;" v-if="withdrawInfo.statusCode == 1">
                <el-button type="info" @click="handleWithOperateF">提现失败</el-button>
                <el-button type="primary" @click="handleWithOperateS">确认提现</el-button>
           </div>
           <el-button type="primary" class="btn" v-if="status == 0">确认提现</el-button>
           <el-button type="primary" style="margin-left:30px;margin-top:20px;" @click="go_back()">返回</el-button>
      </div>
      <!-- 提现失败的原因 -->
     <el-dialog title="提现失败原因" :visible.sync="withdrawFail" width="30%" top="30vh">
        <el-form :model="form" ref="formReason" :rules="rules">
            <el-form-item  prop="reason">
                 <el-input type="textarea" v-model="form.reason" placeholder="请填写认证失败原因"></el-input> 
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="withdrawFail = false">取 消</el-button>
            <el-button type="primary" @click="saveReason('formReason')">确 定</el-button>
        </div>
     </el-dialog>

  </div>
</template>

<script>
import { withdrawDetail,withOperate } from '@/request/api'
import { fmoney } from '@/assets/js/common'
export default {
    data(){
       return {
           status:1,
           
           withdrawInfo:{
           },
           withdrawFail:false, // 提现失败模态框
           form:{
              reason:'' // 提现失败原因
           },
           rules: {
                reason: [
                     { required: true, message: '提现失败原因不能为空', trigger: 'blur' },
                    
                ]
           }
           
       }
    },
    created(){
       this.get_withdrawDetail();  
    },
    methods:{
        go_back() {
            this.$router.go(-1);
        },
        get_withdrawDetail(){
            withdrawDetail({
                id:this.$route.params.id
            }).then(res => {
                 console.log(res)
                 this.withdrawInfo  = res.data;
                 this.withdrawInfo.money = fmoney(this.withdrawInfo.money,2);
            })
        },
        handleWithOperateF(){ // 提现失败
              this.withdrawFail = true;
        },
        handleWithOperateS() {
          this.$confirm("确认提现?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
            }).then(()=>{
                withOperate({
                    id:this.$route.params.id, 
                    status:2
                }).then(res => {
                    console.log(res);
                    if(res.code ==1) {
                        this.$message({
                            type: 'success',
                            message: '提现成功!'
                        });
                       this.get_withdrawDetail();  
                    }
                })
                

            }).catch(()=>{
                this.$message({
                        type: 'info',
                        message: '已取消删除'
                });  
            }) 
        },
        saveReason(formName) {
            this.$refs[formName].validate((valid)=> {
                 if(valid) {
                     withOperate({
                        id:this.$route.params.id,
                        failReason:this.form.reason,
                        status:3
                    }).then(res => {
                        console.log(res);
                        if(res.code == 1) {
                             this.$message.success('操作成功');
                             this.withdrawFail = false;
                             this.form.reason = '';
                             this.get_withdrawDetail();  
                        }
                    })
                 }
            })
        },
        
    
    }
 }
</script>
<style  scoped>
.withdraw_detail > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.container .item {
    display: flex;
    line-height: 36px;

}
.container .info  {
    padding: 30px;
}
.container .info  h4{
    color: #333;
    line-height: 24px;
    font-size:16px;
}
.container .item  div {
    font-size: 14px;
    color:#333;
}
.container .item .left {
   width: 100px;
   text-align: right;
   margin-right: 30px;
   
}
.btn {
    margin-left: 50px;
    margin-top: 50px;
}
.infoBox{
    border-bottom:1px solid #eee;
    overflow:hidden;
}
.info_left{
    float:left;
    width:50%;
}
.info_right{
    float:right;
    width:50%;
}
</style>